<template>
  <view class="common">
    <u--form labelPosition="left" :model="dataForm.labelInfo" ref="labelForm" :rules="rules">
      <u-form-item label="名称" prop="content" borderBottom required>
        <u-input v-model="dataForm.labelInfo.content" border="none" clearable>
        </u-input>
      </u-form-item>
      <u-form-item @click="colorSheetVisibleSwitch" label="颜色" prop="color" border-bottom required>
        <u-input
            :color="dataForm.labelInfo.color"
            v-model="dataForm.labelInfo.color"
            disabled
            disabledColor="#fff"
            border="none">
          <template slot="suffix">
            <u-icon name="arrow-right"></u-icon>
          </template>
        </u-input>
        <u-icon slot="right" color="#fff" name="arrow-right"></u-icon>
        <u-action-sheet
            @close="colorSheetVisibleSwitch"
            @select="setColor()"
            :actions="colors"
            :show="dataForm.control.colorSheetVisible"
            :close-on-click-overlay="false"
            cancelText="取消">
        </u-action-sheet>
      </u-form-item>
      <u-form-item label="启用状态" label-width="70" prop="enableFlag" required>
        <u-switch v-model="dataForm.labelInfo.enableFlag"
                  :active-value="true"
                  :inactive-value="false">
        </u-switch>
      </u-form-item>
    </u--form>
    <u-button :custom-style="{'margin-top': '15px'}"
              type="success"
              shape="circle"
              text="提交"
              @click="saveOrUpdateLabel()">
    </u-button>
    <u-button v-if="type"
              :custom-style="{'margin-top': '15px'}"
              type="error"
              shape="circle"
              text="删除此标签"
              @click="deleteLabel()">
    </u-button>
  </view>
</template>

<script>
import colors from '../common/color.json'

export default {
  onLoad(query) {
    let type = Number(query.type)
    if (type)
      this.dataForm.labelInfo = JSON.parse(query.label)
    this.type = type
  },
  data() {
    return {
      type: 0,
      colors,
      dataForm: {
        // 服务端获取完整对象，不初始化具体字段
        labelInfo: {
          enableFlag: true
        },
        control: {
          colorSheetVisible: false
        }
      },
      rules: {
        content: {
          required: true,
          message: '请填写标签内容!',
          trigger: 'blur'
        },
        color: {
          required: true,
          message: '请选择标签颜色!',
        }
      }
    }
  },
  methods: {
    colorSheetVisibleSwitch() {
      this.dataForm.control.colorSheetVisible = !this.dataForm.control.colorSheetVisible
    },
    setColor(data) {
      this.dataForm.labelInfo.color = data.color
    },
    saveOrUpdateLabel() {
      this.$refs.labelForm.validate().then(() => {
        let db = uniCloud.database()
        if (this.type) {
          db.collection('label').doc(this.dataForm.labelInfo._id).update({
            content: this.dataForm.labelInfo.content,
            color: this.dataForm.labelInfo.color,
            enableFlag: this.dataForm.labelInfo.enableFlag
          }).then(() => {
            uni.showToast({
              title: '修改成功!',
              icon: 'success'
            })
          }).catch(err => {
            uni.showToast({
              title: err.message || '修改失败!',
              icon: 'error'
            })
          }).finally(() => {
            setTimeout(() => {
              uni.navigateBack({})
            }, 1000)
          })
        } else {
          db.collection('label').add(this.dataForm.labelInfo).then(() => {
            uni.showToast({
              title: '新增成功!',
              icon: 'success'
            })
          }).catch(err => {
            uni.showToast({
              title: err.message || '新增失败!',
              icon: 'error'
            })
          }).finally(() => {
            setTimeout(() => {
              uni.navigateBack({})
            }, 1000)
          })
        }
      }).catch(err => {})
    },
    deleteLabel() {
      let _this = this
      uni.showModal({
        title: '删除标签',
        content: '是否删除此标签?',
        success(res) {
          if (res.confirm) {
            uniCloud.database().collection('label').doc(_this.dataForm.labelInfo._id).remove().then(() => {
              uni.showToast({
                title: '删除成功!',
                icon: 'success'
              })
            }).catch(err => {
              uni.showToast({
                title: err.message || '删除失败!',
                icon: 'error'
              })
            }).finally(() => {
              setTimeout(() => {
                uni.navigateBack({})
              }, 1000)
            })
          }
        }
      })
    }
  }
}
</script>

<style>

</style>
